<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getActions(record)"/>
      </template>
      <!-- 展示订单号 -->
      <template #orderNo="{ record }">
        <Row :gutter="[24, 24]" class="order-no">
          <Col :span="4">
            <Tag color="blue" >支付</Tag>
          </Col>
          <Col :span="20">
            <Tooltip placement="topLeft">
              <template #title>
                <span>{{ record.payOrderNo }}</span>
              </template>
              <div class="order-no-data">{{ record.payOrderNo }}</div>
            </Tooltip>
          </Col>
        </Row>
        <Row :gutter="[24, 24]">
          <Col :span="4">
            <Tag color="green">商户</Tag>
          </Col>
          <Col :span="20">
            <Tooltip placement="topLeft">
              <template #title>
                <span>{{ record.mchOrderNo }}</span>
              </template>
              <div class="order-no-data">{{ record.mchOrderNo }}</div>
            </Tooltip>
          </Col>
        </Row>
      </template>
    </BasicTable>
    <OrderDetail @register="register" />
    <RefundModal @register="registerRefundModal" @success="reload" />
    <QrCodeModel @register="registerQrCodeModal" @success="reload" :showFooter="false" />
  </div>
</template>
<script lang="ts" name="PayOrderList" setup>
import { ref, onUnmounted } from 'vue';
import { Tag, Row, Col, Tooltip  } from 'ant-design-vue';
import { BasicTable, TableAction } from '/@/components/Table';
import { useModal } from '/@/components/Modal';
import { useDrawer } from '/@/components/Drawer';
import OrderDetail from './OrderDetail.vue';
import RefundModal from './RefundModal.vue';
import QrCodeModel from '../payDemo/QrCodeModel.vue';
import { useGlobSetting } from '/@/hooks/setting';
import { columns, searchFormSchema } from './order.data';
import { getList, closeOrder, getExportUrl, getImportUrl, continuePay } from './order.api';
import { useListPage } from '/@/hooks/system/useListPage';
import { useMessage } from '/@/hooks/web/useMessage';
import { useUserStore } from '/@/store/modules/user';
const { createMessage } = useMessage();
const glob = useGlobSetting();
const isScanCode = ref(false)
const timeInter = ref<any>(null)
const userStore = useUserStore()
const [register, { openDrawer: openDetail }] = useDrawer();
const [registerRefundModal, { openModal: openRefundModal }] = useModal();
const [registerQrCodeModal, { openModal: openQrCodeModal, closeModal: closeQrCodeModal }] = useModal();
// 列表页面公共参数、方法
const { prefixCls, onExportXls, onImportXls, tableContext } = useListPage({
  designScope: 'PayOrderList',
  tableProps: {
    title: '支付订单列表',
    api: getList,
    beforeFetch: (params) => {
      params.tenantId = userStore.getSelectTenant.isMainTenant ? userStore.getSelectTenant.id : undefined
    },
    columns: columns,
    bordered: false,
    actionColumn: {
      width: 170,
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      slots: { customRender: 'action' },
    },
    formConfig: {
      schemas: searchFormSchema,
      fieldMapToTime: [['fieldTime', ['beginDate', 'endDate'], 'YYYY-MM-DD']],
    },
  },
  exportConfig: {
    name: "支付订单",
    url: getExportUrl,
  },
  importConfig: {
    url: getImportUrl
  }
})

const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

/**
 * 查看
 */
function handleDetail(record) {
  openDetail(true, {
    record
  });
}
/**
 * 操作列定义
 * @param record
 */
function getActions(record) {
  return [
    {
      label: '查看',
      onClick: handleDetail.bind(null, record),
      // ifShow: record.sendStatus == 0
    },
    {
      label: '退款',
      ifShow: record.status == '2',
      onClick: handleRefund.bind(null, record)
    },
    {
      label: '取消',
      // 只有待支付和支付中订单才可以取消
      ifShow: record.status == '0' || record.status == '1',
      onClick: handleCloseOrder.bind(null, record)
    },
    {
      label: '支付',
      ifShow: record.status == '1',
      onClick: handleContinuePayOrder.bind(null, record)
    }
  ]
}

/**
 * 退款
 */
const handleRefund = async (record) => {
  openRefundModal(true, {record})
}

/**
 * 关闭订单
 */
const handleCloseOrder = async (record) => {
  createMessage.loading({
    content: '取消中...',
    key: 'closeOrder'
  });
  try {
    await closeOrder({payOrderNo: record.payOrderNo, mchNo: record.mchNo, appId: record.appId})
    reload()
    createMessage.success("取消成功")
  } finally {
    createMessage.destroy('closeOrder')
  }
}

const handleContinuePayOrder = async (record) => {
  const data = await continuePay({
    mchOrderNo: record.mchOrderNo,
    version: 'v1',
    mchNo: record.mchNo,
    appId: record.appId
  })
  openQrCodeModal(true, {
    wayCode: record.wayCode, apiRes: data
  })
}

</script>


<style lang="less">
.order-no {
  margin-bottom: 5px;
}
.order-no-data {
  text-align: left;
  border: 1px;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 12px;
  text-overflow: ellipsis;
}

</style>